<template>
	<view>
		<u-toast ref="uToast" />
		<view v-if="show" class="loading_view">
		  <u-loading mode="circle" size="50"></u-loading>
		  <view class="messgae">
			加载中...
		  </view>
		</view>
		<view v-else class='body'>
			<view class="goods">
				<view class="img"><image :src="view.s_icon"></image></view>
				<view class="right">
					<view class="name">{{view.s_name}}</view>
					<view class='pric'>￥{{view.s_money}}</view>
				</view>
			</view>
			<view class="total">
				还需支付 <text>￥{{view.s_money}}</text>
			</view>
			
			<view class='pay_type'>
				<view class='pay_head'>支付方式</view>
				<view class="pay_list">
					<view class='img'><image src="../../static/image/wx_zf.png"></image></view>
					<view class="name">微信支付</view>
					<view class="chose">
						<radio value="1" :checked="pay_type===1" color="#EA4389"/>
					</view>
				</view>
			</view>
			
			<view class="btn" @click="onBtn">
				<view>确认支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pay from '../../static/pay/applets.js'
	export default{
		data(){
			return{
				pay_type:1,
				id:null,
				view:null,
				show:true
			}
		},
		onLoad(e){
			var id=typeof(e.id);
			
			var name=typeof(e.name)
			
			if(id!='undefined'){
				this.id=Number(e.id);
			}
			
			if(name!='undefined'){
				this.onPay_success('h5',e.name);

				return;
			}

			if(id!='undefined'){
				this.onView();
			}
		},methods:{
			onView(){
				var that=this;
				
				this.$request({
					url:'/secret/pay_show',
					data:{id:this.id},
					success(res){
						if(res.data.code==1){
							that.view=res.data.data.view;
							
							that.show=false;
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type:'error'
							});
							
							setTimeout(function(){
								uni.navigateBack({
								    delta: 1
								});
							},1300)
						}
					},fail(res){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type:'warning'
						});
					}
				})
			},
			onBtn(){
				var that=this;
				
				// 小程序支付
				// pay.func('/Paysecret/jsapi',{id:this.id})
				
				// return false
				
				this.$request({
					url:'/secret/pay_btn',
					data:{id:this.id,pay_type:this.pay_type},
					success(res){
						if(res.data.code==1){
							var price=res.data.data.price;
							
							var name=res.data.data.name;
							//h5
							if(price>0){
								that.onPay_h5(res.data.data.mweb_url,name);
							}else{
								that.$refs.uToast.show({
									title: '购买成功',
									type:'success'
								});
								
								setTimeout(function(){
									that.show=true;
									
									that.onView();
								},1300);
							}
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type:'error'
							});
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type:'warning'
						});
					}
				})
			},
			onPay_h5(url,name){
				var redirect_url='http://wx.jianmeijiayuan.com/#/pages/secret/pay?id='+this.id+'&name='+name;
				
				redirect_url=this.getUrl(redirect_url);
				
				location.href=url+"&redirect_url="+redirect_url;
			},
			onPay_success(type='h5',name=""){
				var that=this;

				this.$request({
					url:"/bill/secret",
					data:{name:name},
					success(res){
						if(res.data.code==1){
							that.$refs.uToast.show({
								title: '支付成功',
								type:'success'
							});
							if(type=='h5'){
								setTimeout(function(){
									location.href='http://wx.jianmeijiayuan.com/#/pages/secret/secretView?id='+that.id
								},1100)
							}
						}else{
							that.onView();
							
							that.$refs.uToast.show({
								title: res.data.msg,
								type:'error'
							});
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type:'warning'
						});
					}
				})
			},
			getUrl(url){
				url = (url + '').toString();

				return encodeURIComponent(url).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
			}
		}
	}
</script>

<style scoped>
	.body{
		background:#F7F7F7;
	}
	.btn{
		position: fixed;
		bottom:20rpx;
		width:100%;
	}
	.btn view{
		width:96%;
		height:90rpx;
		line-height: 90rpx;
		text-align: center;
		color:#fff;
		background: #EA4389;
		font-size:35rpx;
		border-radius: 10rpx;
		margin:auto;
	}
	.pay_type{
		margin-top:20rpx;
		background: #fff;
		padding:10rpx 0;
	}
	.pay_type .pay_head{
		padding:10rpx 30rpx;
		font-size:28rpx;
		color:#888;
	}
	.pay_type .pay_list{
		display:flex;
		align-items: center;
		padding:20rpx 30rpx;
		border-bottom:2rpx solid #F2F2F2;
	}
	.pay_type .pay_list .img{
		width:60rpx;
		height:50rpx;
	}
	.pay_type .pay_list .img image{
		width:56rpx;
		height:50rpx;
	}
	.pay_type .pay_list .name{
		flex:1;
		font-size:30rpx;
		padding-left:15rpx;
	}
	.pay_type .pay_list .chose{
		padding:0 10rpx;
	}
	.goods{
		display:flex;
		padding:20rpx 40rpx;
		background:#fff;
		border-bottom:1px solid #F2F2F2
	}
	.goods .img{
		width:140rpx;
		height:170rpx;
	}
	.goods .img image{
		width:140rpx;
		height:170rpx;
	}
	.goods .right{
		flex:1;
		padding-left:20rpx;
	}
	.goods .right .name{
		font-size:32rpx;
	}
	.goods .right .pric{
		font-size:26rpx;
		color:#EA4389;
		padding-top:90rpx;
	}
	.total{
		text-align: right;
		background:#fff;
		padding:30rpx 20rpx;
	}
	.total text{
		font-size:34rpx;
		color:#EA4389;
	}
</style>
